<!--
 * @Author: your name
 * @Date: 2021-08-05 09:04:43
 * @LastEditTime: 2021-08-10 11:50:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Editnp
 * @FilePath: \xxtx-group-ui\src\views\JZ.vue
-->
<template>
    <div class="JZ">
        <!-- 头部 -->
       <Header></Header>
        <!-- /头部 -->
        <!-- 体部 -->
        <div class="content">
            <!-- 第一模块 -->
            <div class="first_content">
                 <!-- 轮播图 -->
            <div class="carousel ">
                 <el-carousel height="369px" > 
                <el-carousel-item v-for="item in carousels" :key="item.id">
                  <img :src="item.url" alt="" width="780px">
                </el-carousel-item>
            </el-carousel>
            </div>
            <!-- /轮播图 -->
            <div class="carousel-right">
                <ul class="list">
                     <li v-for="item in pageQuery" @click="toaritcle(item.id)" :key="item.id">{{item.title}}</li>
                </ul>
               <el-divider></el-divider>
               <ul class="list">
                     <li v-for="i in pageQuery2" @click="toaritcle(i.id)" :key="i.id">{{i.title}}</li>
                </ul>
               
            </div>
            </div>
            <!-- /第一模块 -->
            <!-- 第二模块 -->
            <div class="wrapper">
                <div class="plates">
                    <div class="plate" v-for="item in categorys" :key="item.id">
                        <div class="head">
                            <div class="title" @click="tomore(item.category.id,item.category.name)">{{item.category.name}}</div>
                            <div class="more" @click="tomore(item.category.id,item.category.name)">更多&gt;&gt;</div>
                        </div>
                          <ul class="list">
                            <li  v-for="i in item.aritcle" :key="i.id "
                              @click="toaritcle(i.id)" >{{i.title}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /第二模块 -->
        </div>
        <!-- /体部 -->
        <!-- 底部 -->
        <Footer></Footer>
        <!-- /底部 -->
    </div>
</template>
<script>
import {get} from "../utils/request"
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
    components: {
    Header,
    Footer,
  },
    data(){
        return{
            carousels:[],
            categorys:[],
            pageQuery:[],
            pageQuery2:[],
            pageQuery3:[],
            pageQuery4:[],
            params:{page:3,pageSize:4},
            params2:{page:4,pageSize:4},
            data:[],
            params3:{page:1,pageSize:4,categoryId:3},
            params4:{page:1,pageSize:4,categoryId:4},
        }
    },
    created(){
        this.loadCarousels();
        this.findCategoryArticles();
        this.pageQuerys();
        this.pageQuerys2();
        this.pageQuerys3();
        this.pageQuerys4();
    },
    methods:{
      tomore(id,name){
        this.$router.push({path:'/more',query:{id,name}})
      },
      toaritcle(id){
        this.$router.push({path:'/jzlist',query:{id}})
      },
        loadCarousels(){
            let url='/index/carousel/findAll';
            get(url)
            .then(res => {
                let arr = res.data;
                this.carousels=arr.slice(7,10);
            })
        },
        findCategoryArticles(){
            let url="/index/article/findCategoryArticles";
             get(url)
            .then(res => {
              let arr = res.data;
              this.categorys=arr.slice(5);
            })
        },
        pageQuerys(){
            let url="/index/article/pageQuery";
            
             get(url,this.params)
            .then(res => {
                this.pageQuery= res.data.list;
            })
        },
        pageQuerys2(){
            let url="/index/article/pageQuery";
            
             get(url,this.params2)
            .then(res => {
                this.pageQuery2= res.data.list;
            })
        },
        pageQuerys3(){
            let url="/index/article/pageQuery";
            
             get(url,this.params3)
            .then(res => {
                this.pageQuery3= res.data.list;
            })
        },
        pageQuerys4(){
            let url="/index/article/pageQuery";
            
             get(url,this.params4)
            .then(res => {
                this.pageQuery4= res.data.list;
            })
        },
    }
}
</script>
<style lang="scss" scoped>
$color_primary:#000;
.JZ{
  min-height: 1000px;
    .content{
    background-color: #fff;
    padding: 1em 0;
    .first_content{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      & > div {
        background-color: #fff;
        border-radius: 5px;
        padding: 1em .5em;
        margin-left:8em ;
        min-height: 369px;
      }
      .carousel{
        margin-right: 1em;
        flex-basis: 780px;
      }
      .carousel-right{
        flex: 1;
        ul.list {
          li {
            font-size: 16px;
            white-space: nowrap;
            // overflow: hidden;
            text-overflow: ellipsis;
            line-height: 2em;
            cursor: pointer;
            list-style-type: disc;
          }
          
          li:hover {
            color: $color_primary;
          }
          li:first-child{
              color: #333;
              font-weight: bold;
              font-size: 20px;
              overflow: hidden;
          }
        }
      }

    }
        .plates::after {
      content:"";
      display: block;
      clear: both;
    }
    .plates {
      padding:.5em 0;
      .plate {
        box-sizing: border-box;
        float: left;
        width: 32.5%;
        height: 300px;
        background-color: #fff;
        padding: .5em;
        margin-right: 1.25%;
        margin-bottom: .5em;
        .head {
          display: flex;
          background-color: #f9f9f9;
        //   liangzh
          justify-content: space-between;
          .title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
             cursor: pointer;
          }
          .more {
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
        }
        ul.list {
          li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 2em;
            cursor: pointer;
            font-size: 16px;

          }
        li:first-child{
            color: #000;
          }
          li:hover {
            color: $color_primary;
          }
        }

      }
      .plate:nth-child(3n){
        margin-right: 0;
      }
    }
    }
}
</style>